<template>
    <view class="top-bar">
        <!-- 左侧 logo 和名字 -->
        <view class="left-section">
            <!-- 这里假设 logo 是一个图片，你可以替换为实际的图片路径 -->
            <image src="/static/logo.png" mode="aspectFit" class="logo"></image>
            <text class="blog-name">果果狗blog</text>
        </view>
        <!-- 中间搜索框 -->
        <uni-search-bar
            placeholder="搜索..."
            :radius="15"
            @confirm="onSearch"
        ></uni-search-bar>
        <!-- 右侧登录和注册按钮 -->
        <view class="right-section">
			<view v-if="!isLogin">
				<button class="login-btn" @click="onLogin">登录</button>
				<button class="register-btn" @click="onRegister">注册</button>
			</view>
           
			<view v-else>
				<el-dropdown class="focus-visible" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
				    <span class="el-dropdown-link">
				        <div>
				            <div  class="logged-in-container">
				                <div class="logged-in-items" >
				                    <img
				                        v-if="user.avatarURL!=='default'"
				                        :src="user.avatarURL"
				                        style="
				                            margin-right: 10px;
				                            width: 35px;
				                            height: 35px;
				                            border-radius: 50%;
				                        "
				                    />
				                    <img
				                        v-else
				                        src="/static/default_avatar.png"
				                        style="
				                            margin-right: 10px;
				                            width: 35px;
				                            height: 35px;
				                            border-radius: 50%;
				                        "
				                    />
				                    <h4>{{ user.userName }}</h4>
				                    <el-icon class="el-icon--right" :class="{ 'rotate-icon': isHovered ,'rotate-icon-back':!isHovered}">
				                        <arrow-down />
				                    </el-icon>
									 
				                </div>
								
				            </div>
				        </div>
				    </span>
				    <template #dropdown>
				        <el-dropdown-menu>
				            <el-dropdown-item>基本信息</el-dropdown-item>
				        </el-dropdown-menu>
				    </template>
				</el-dropdown>
			</view>
            <el-button style="background-color: #0161f3;color: white;" @click="goToEditor()">发表文章</el-button>
        </view>
    </view>
</template>

<script>
import * as jsrsasign from 'utils/jsrsasign.js'
export default {
    data() {
        return {
            user:{
                userName:'',
                avatarURL:''
            },
            isLogin:false,
            isHovered: false
        };
    },
    methods: {
        onSearch(value) {
            console.log('搜索内容:', value);
        },
        onLogin() {
            console.log('点击了登录按钮');
        },
        onRegister() {
            console.log('点击了注册按钮');
        },
        checkIsLogin(){
            var token=uni.getStorageSync('token')
            if(token!==''&&token!==null){
                this.isLogin=true;
                this.user.userName=jsrsasign.getUsernameFromToken(token)
                this.user.avatarURL=jsrsasign.getUserAvatarURLFromToken(token)
            }
        },
        handleMouseEnter() {
            this.isHovered = true;
        },
        handleMouseLeave() {
            this.isHovered = false;
        },
		// 跳转至文章编辑页
		    goToEditor() {
		      uni.navigateTo({
		        url: '/pages/blog/blog_editor'  // 注意路径格式：以 `/` 开头，路径需与 pages.json 配置一致
		      });
		    }
    },
    mounted() {
        this.checkIsLogin()
    }
};
</script>

<style scoped>
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #f8f8f8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.left-section {
    display: flex;
    align-items: center;
}

.logo {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.blog-name {
    font-size: 18px;
    font-weight: bold;
}

uni-search-bar {
    width: 300px;
}

.right-section {
    display: flex;
}

.login-btn,
.register-btn {
    margin-left: 10px;
    padding: 5px 15px;
    border: none;
    border-radius: 5px;
    background-color: #007aff;
    color: white;
    font-size: 14px;
}

.register-btn {
    background-color: #ff6600;
}

.logged-in-items {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: flex-start; /* 水平靠左 */
}

.logged-in-items h4 {
    margin: 0; /* 去除 h4 默认的外边距 */
}
</style>    